* {
    margin: 0px;
    padding: 0px;
}

/* 共同颜色值及css3变量？ */
:root {
    --h1: #1b2f90;
    --bg: #f9f9f6;
    --t: 2s;
}

/* 共同样式抽取 */
.center {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

body {
    /* position: relative; */
    
    background: url(../img/bg.png) no-repeat ;
    /* background-size: 100%; */
    overflow: hidden;
    /* 图片文件需要跳出一级 */
    /* background-color: blue;
    background-image: url(img/bg.png); */
    /* background-size: 100% 100%; */
    position: fixed;

        width:100%;

        height:100%;
             background-size:cover;
}

/* 调试技巧：用开发者工具调数据值 */
/* 写源码技巧：上面有直接复制 */
.dog {
    width: 300px;
    height: 400px;
    position: relative;
    /* background-color: blue; */
    top: 450px;
}

.forehead {
    width: 102px;
    height: 48px;
    background: var(--bg);
    /* 绝对定位调整：先绝对定位，再top,left,bottom,rigth,再回。即盒子模型 */
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    /* 平移 transform: translate(x,y); */
    border-radius: 51px / 40px 40px 8px 8px;
    /* 取圆角:斜杠前是水平方向圆角半径，斜杠后是垂直方向圆角半径,斜杆前值取width一半，后面微调 不能大于height数值越靠近height越扁*/
}

.face {
    width: 110px;
    height: 68px;
    background: var(--bg);
    top: 20px;
    border-radius: 50%;
    z-index: 1;
}

.chin {
    width: 104px;
    height: 36px;
    background: var(--bg);
    top: 60px;
    border-radius: 52px / 0px 0px 36px 36px;
    z-index: 1;
}

/* 在定位基础上，再平移和旋转，利用圆弧阴影实现眼部轮廓。好模板,画形状，大小，背景，形状，定位，旋移 */
.ear {
    width: 16px;
    height: 70px;
    background: var(--h1);
    border-radius: 50%;
    position: absolute;
    top: 34px;
    left: 50%;
    transform-origin: 50% 0;
    /* 中心旋转点，围绕这个点旋转 */
    z-index: 0;
    animation: rotate var(--t) ease infinite;
}

.ear.right {
    /* 不用多次写 相同样式抽取再给html添 */
    /* transform:scale(-1,1) translate(-26px,0) rotate(10deg); */
    animation: rotateR var(--t) ease infinite;

}

.eye {
    width: 24px;
    height: 24px;
    background: var(--bg);
    border-radius: 12px / 13px 12px 12px 2px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform-origin: 50% 0;
    transform: translate(-42px, 0) rotate(10deg);
    z-index: 2;
    box-shadow: 1px 0px 0px 0px #000 inset, -1px 0px 5px 1px #ddd;
    /* box-shadow: h-shadow v-shadow blur spread color inset;水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色。在CSS颜色值寻找颜色值的完整列表 从外层的阴影（开始时）改变阴影内侧阴影 ，手动改，看效果,顺时针*/
    overflow: hidden;
}

.eye.right {
    transform: scale(-1, 1) translate(-17px, 0) rotate(10deg);
    box-shadow: 1px 0px 0px 0px #000 inset;
    overflow: hidden;
}

.birthMark {
    width: 30px;
    height: 36px;
    background: var(--h1);
    border-radius: 15px / 17px 23px 2px 13px;
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 1;
    transform: translate(15px, 0) rotate(-10deg);
}

/* 眼球在眼部里面，html用嵌套 */
.pupil {
    width: 26px;
    height: 26px;
    background: #e79101;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 1px;
    box-shadow: 0 0 8px 0 #000 inset;
    animation: translate var(--t) ease infinite;
}

/* 内容在内容上面且比较小，用伪元素实现插入内容 */
.pupil::before {
    width: 18px;
    height: 18px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    /* 伪元素需要用content:'';占位 */
}

.pupil::after {
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 3px;
    /* transform: translate(-50%,-50%); */
    content: '';
}

.nose {
    width: 62px;
    height: 32px;
    top: 42px;
    background: #363035;
    border-radius: 31px / 10px 10px 22px 22px;
    /* 上边取10px，下边22px */
    z-index: 2;
}

.nostril {
    width: 15px;
    height: 4px;
    background: linear-gradient(0deg, #363035 0%, #000 100%);
    /* 渐变色使用  */
    position: absolute;
    top: 19px;
    left: 50%;
    /* 小内容只需left: 50%;再调高度 */
    border-radius: 50%;
    transform-origin: 50% 0;
    transform: translate(-18px, 0) rotate(30deg);
    animation: resize var(--t) ease infinite;
}

.nostril.right.center {
    transform: scale(-1, 1) translate(-3px, 0) rotate(30deg);
    animation: resize var(--t) ease infinite;
}

.nose::before {
    content: '';
    width: 60px;
    height: 10px;
    background: linear-gradient(30deg, #fff 0%, #fff 8%, #b1aeb1 15%, #b1aeb1 50%, #544d53 100%);
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translate(-50%, -0);
    border-radius: 30px / 8px 8px 2px 2px;
    z-index: 1;
}

.mouth {
    width: 68px;
    height: 27px;
    background: #671316;
    border-radius: 34px / 0px 0px 27px 27px;
    position: absolute;
    top: 70px;
    z-index: 1;
    animation: open var(--t) ease infinite;
}

.mouth::before {
    width: 68px;
    height: 8px;
    background: var(--bg);
    border-radius: 34px / 0px 0px 5px 5px;
    content: '';
    position: absolute;
    z-index: 1;
}

.teen {
    width: 8px;
    height: 3px;
    background: var(--bg);
    border-radius: 4px / 0px 0px 0px 1px;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translate(-8px, 0);
    z-index: 1;
}

.teen.right {
    transform: scale(-1, 1) translate(0, 0);
    border-right: .5px solid #ddd;
}

.tongue {
    width: 34px;
    height: 14px;
    background: #a2504f;
    border-radius: 17px / 0px 0px 7px 7px;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 0;
    box-shadow: 0 0 4px 0 #111 inset;
    animation: extent var(--t) ease infinite;
}

.body {
    width: 66px;
    height: 70px;
    background: var(--bg);
    top: 89px;
    border-radius: 50%;
}

.arm {
    width: 26px;
    height: 40px;
    background: var(--bg);
    border-radius: 13px / 20px 0px 14px 20px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-43px, 0) rotate(21deg);
}

.arm.right {
    transform: scale(-1, 1) translate(-17px, 0) rotate(21deg);
}

.arm::before {
    content: '';
    width: 5px;
    height: 20px;
    border-radius: 5px/ 10px 0px 0px 10px;
    box-shadow: -1px 0 0px 0 rgba(200, 200, 200, 0.5);
    position: absolute;
    top: 14px;
    right: 6px;
    transform: rotate(-5deg);
}

.leg {
    width: 29px;
    height: 50px;
    background: linear-gradient(-90deg, #bbb 0%, #ddd 8%, var(--bg) 20%, var(--bg) 100%);
    border-radius: 15px / 5px 5px 15px 45px;
    position: absolute;
    top: 39px;
    left: 50%;
    transform: translate(-32px, 0);
}

.leg.right {
    transform: scale(-1, 1) translate(-3px, 0);
}

.foot {
    width: 29px;
    height: 15px;
    background: linear-gradient(-120deg, #ddd 0%, #ddd 10%, var(--bg) 30%, var(--bg) 100%);
    border-radius: 15px / 8px 8px 3px 3px;
    position: absolute;
    bottom: -5px;
}

.belly {
    z-index: 2;
    width: 60px;
    height: 36px;
    background: linear-gradient(0deg, #ddd 0%, #ddd 10%, var(--bg) 30%, var(--bg) 100%);
    border-radius: 30px / 0px 0px 36px 36px;
    position: absolute;
    /* 相对定位为相对上级定位 */
    top: 34px;
}

/* 动画实现步骤：先在引用样式，再定义。不同进度有不同效果 */
@keyframes rotate {
    0% {
        transform: translate(-42px, 0) rotate(10deg);
    }

    50% {
        transform: translate(-42px, 0) rotate(30deg);
    }

    100% {
        transform: translate(-42px, 0) rotate(10deg);
    }
}

@keyframes rotateR {
    0% {
        transform: scale(-1, 1) translate(-26px, 0) rotate(10deg);
    }

    50% {
        transform: scale(-1, 1) translate(-26px, 0) rotate(30deg);
    }

    100% {
        transform: scale(-1, 1) translate(-26px, 0) rotate(10deg);
    }
}

@keyframes translate {
    0% {
        left: 1px;
    }

    50% {
        left: 3px;
    }

    100% {
        left: 1px;
    }
}

@keyframes resize {
    0% {
        height: 4px;
    }

    50% {
        height: 3px;
    }

    100% {
        height: 4px;
    }
}

@keyframes extent {
    0% {
        height: 14px;
    }

    50% {
        height: 19px;
    }

    100% {
        height: 14px;
    }
}

@keyframes open {
    0% {
        height: 27px;
        border-radius: 34px / 0px 0px 27px 27px;
    }

    50% {
        height: 25px;
        border-radius: 34px / 0px 0px 25px 25px;
    }

    100% {
        height: 27px;
        border-radius: 34px / 0px 0px 27px 27px;
    }
}